<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="shortcut icon" href="../rent.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../public/libs/vant.css">
    <link rel="stylesheet" href="../public/css/register.css">
    <!-- <link rel="stylesheet" href="../public/libs/setting.css"> -->
    <link rel="stylesheet" href="../public/libs/app.css">
</head>
<style>
    .gm {
        font-size: 14px;
        color: #ffffff;
        margin-left: 18%;
    }

    a {
        color: #ffffff;
    }
    .img2{
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0px;
        left: -26px;
    }

    .gm{
        height: 30px;
        width: 150px;
        font-size: 16px;
        /* background-color: #2db7f5; */
        color: #fff;
        position: absolute;
        top: 5px;
        left: -10px;

        /* margin: 10px 0 0 200px; */
    }
    .img1 {
        width: 70px;
        height: 70px;
    }
    @media screen and (min-width: 500px) {
    html{
        background-color: white;
    }
    body {
        box-sizing: border-box;
        margin: 0 auto;
        /* height: 100%; */
        width:100%;
        /* width: 375px;
        height: 702px; */
        /* border: 1px solid grey; */
    }
    .gm{
        height: 30px;
        width: 150px;
        font-size: 25px;
        /* background-color: #2db7f5; */
        color: #fff;
        position: absolute;
        top: 5px;
        left: 20px;

        margin: 10px 0 0 200px;
    }
    .img1 {
        width: 150px;
        height: 150px;
    }
    .img2{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0px;
        left: -40px;
    }


}
</style>

<body>
    <header >
        <a href="buy.html" class="gm">
            <img src="../public/img/suo3.png" alt="" class="img2">
            联系客服
            <!-- <img src="../public/img/fanhuiWhite.png" alt=""> -->
        </a>
        <!-- <p class="gm" @click="gm()">购买大厅</p> -->
    </header>
    <section class="registerContainer">
        <div class="iconContainer">
            <img src="../public/img/suo.png" alt="" class="img1">
            <p></p>
        </div>
        <div id="app">
            <ul class="inputBox">
                <!-- <li>
                    <input type="text" placeholder="请输入邮箱" v-model="email">
                    <button class="yanjing">
                        <img src="../public/img/yanjing.png" alt="">
                    </button>
                </li>
                <li>
                    <input class="yzmInput" type="text" placeholder="输入验证码" v-model="yz_code">
                    <button class="yanzhengma" v-cloak @click="getCheckCode"
                        v-bind:disabled="disabled">{{ countDown }}</button>
                </li> -->
                <li>
                    <input type="text" placeholder="请输入邀请码解锁" v-model="yqm" onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')">
                    <button class="yanjing">
                        <img src="../public/img/yanjing.png" alt="">
                    </button>
                </li>

            </ul>
            <!-- <button class="registerBtn" @click="gm">购买邀请码</button> -->
            <button class="registerBtn" @click="confirm_register">提交</button>
        </div>

    </section>
</body>
<script src="../public/libs/vue.min.js"></script>
<script src="../public/libs/jquery-3.4.1.min.js"></script>
<script src="../public/libs/jquery.cookie.js"></script>
<script src="../public/libs/vant.js"></script>
<script src="../public/libs/md5.js"></script>
<script src="../public/libs/app.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            countDown: '发送验证码', // 发送验证码按钮上的提示文字
            disabled: false, // 控制发送验证码按钮是否能够被点击，false可以被点击，true不能被点击
            email: '',//邮箱
            yz_code: '',//验证码
            yqm: "",//邀请码 
        },
        mounted: function () {
        },
        methods: {
            //购买大厅
            gm: function () {
                window.location.href = "buy.html"
            },

            // 获取验证码
            getCheckCode: function () {
                var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                if (!reg.test(this.email)) {
                    // vant.Toast("请输入正确邮箱");
                    app.text_show( "请输入正确邮箱");

                    return
                }
                $.ajax({
                    url: app.webUrl + '/zh/email',
                    type: 'post',
                    data: { email: vm.email },
                    success: function () {

                    }
                });
                // console.log(ph_num)
                this.disabled = true;
                var num = 59;
                this.countDown = 60;
                var that = this;
                var timer = setInterval(function () {
                    that.countDown = num--;
                    if (that.countDown == 0) {
                        that.countDown = "发送验证码";
                        that.disabled = false;
                        clearInterval(timer);
                    }
                }, 1000);

            },
            //弹窗
            tc: function () {
                vant.Dialog.confirm({
                    title: '邀请码正在核对中',
                    message: '该邀请码错误或不存在',
                    confirmButtonText:"购买邀请码",
                    cancelButtonText:"取消",
                })
                    .then(() => {
                        window.location.href = "buy.html"
                    })
                    .catch(() => {
                    });
            },
            // 立即登录
            confirm_register: function () {
                // console.log(vm.yqm)
                $.cookie("yqm", vm.yqm);
                // $.cookie("yqm",666);
                // console.log($.cookie("yqm"));


                // window.location.href = "new.html"
                // window.location.href="dating.html"
                // var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                // if (!reg.test(this.email)) {
                //     app.text_show( "请输入正确邮箱");

                //     return
                // }
                // if (vm.yz_code == "") {
                //     app.text_show( "请输验证码");
                //     return
                // }
                if (vm.yqm == "") {

                    // app.text_show( "请输邀请码" });
                    app.text_show('请输入邀请码');
                    // vant.Dialog({ 
                    //     message: '请输入邀请码',
                    //     showConfirmButton:false,
                    //     closeOnClickOverlay:true,
                    //  });
                    //  setTimeout(() => {
                    //  $(".van-overlay").click()
                    //  }, 1000);
                    // setTimeout(() => {
                    //     vant.Dialog.close
                    // }, 1000);
                    return
                }
                $.ajax({
                    url: app.webUrl + '/Invitation/login',
                    type: 'post',
                    data: {
                        code: vm.yqm,
                        // email: vm.email,
                        // verification: vm.yz_code,
                    },
                    xhrFields: {
                        withCredentials: true
                    },
                    success: cb
                });
                function cb(ret) {
                    console.log(ret);
                    if (ret.status == 1) {
                    app.text_show('登录成功');
                        $.cookie("yqm", vm.yqm);
                        // if (ret.data == 0) {
                            setTimeout(function () {
                                vant.Dialog.confirm({
                                    title: '提示',
                                    message: '是否进入新手指导',
                                    confirmButtonText:"是",
                                    cancelButtonText:"否",
                                })
                                    .then(() => {
                                        window.location.href = "new.html"
                                    })
                                    .catch(() => {
                                        window.location.href = "dating.html"
                                    });

                            }, 1000);
                            return
                        // }
                        // setTimeout(function () { window.location.href = "dating.html" }, 1000);
                    }else if(ret.status == 0&&ret.data=="登录失败登录次数用尽"){
                        // app.text_show( ret.data);
                        app.text_show(ret.data);

                    } else {
                        vm.tc();
                    }
                }
            }
        },
    });

</script>

</html>